{% extends "base.html" %}
{% load notifications_tags %}

{% block header %}
    <h3>我的消息</h3>
{% endblock %}

{% block content %}
    <div class="row">
        <div class="col-md-4">
            <div class="list-group">
            {% notifications_unread as unread_count %}
                  <a href="{% url 'notifications:all' %}" class="list-group-item {% if request.path == '/notifications/' %}active{% endif %}">
                      全部
                      <span class="badge"></span>
                  </a>
                  <a href="{% url 'notifications:unread' %}" class="list-group-item {% if request.path != '/notifications/' %}active{% endif %}">
                      未读
                      <span class="badge">{% if unread_count > 0 %}{{ unread_count }}{% endif %}</span>
                  </a>
            </div>
        </div>
        <div class="col-md-8">
            <ul class="notifications">
              {% for notice in notifications %}
                {% include 'notifications/notice.html' %}
              {% empty %}
                  <div class="jumbotron">
                    <h4>暂无通知</h4>
                  </div>
              {% endfor %}
            </ul>
        </div>
    </div>
    <script>
        $(document).ready(function () {
            $(".list-group a").click(function () {
                $(this).addClass('active');
                $(this).siblings().removeClass('active');
            });
            $(".notifications img").removeAttr('style');
        });
    </script>
{% endblock %}

